<template>
  <div class="list_table">
    <el-table :data="msbdList" border style="width: 100%" max-height="500">
      <el-table-column type="index" label="#" width="50"> </el-table-column>
      <el-table-column prop="title" label="标题" width="430"> </el-table-column>
      <el-table-column prop="author" label="作者" width="100"> </el-table-column>
      <el-table-column prop="date" label="发布时间" width="200"> </el-table-column>
      <el-table-column
        prop="cid"
        :formatter="(row) => classifyMap[row.cid]"
        label="类别"
        width="100"
      >
      </el-table-column>
      <el-table-column prop="time" label="用时" width="100"> </el-table-column>
      <el-table-column fixed="right" label="操作" width="260">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="info" size="small"
            >查看</el-button
          >
          <el-button type="warning" size="small" @click="handleEditClk(scope.row)"
            >编辑</el-button
          >
          <el-button type="danger" @click="handleDelClk(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { mapActions, mapState, mapGetters, mapMutations } from "vuex";
export default {
  data() {
    return {
      EditData: {},
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    ...mapActions("list", ["getList", "delList", "EditList"]),
    ...mapMutations("list", ["SET_DRAWER", "SET_FORM"]),
    handleClick(row) {
      this.handleEditClk(row);
    },
    handleEditClk(row) {
      this.SET_DRAWER(this.drawer);
      this.SET_FORM({ ...row });
    },
    async handleDelClk(id) {
      await this.delList(id);
    },
  },
  computed: {
    ...mapState("list", ["msbdList", "drawer"]),
    ...mapGetters("list", ["classifyMap"]),
  },
};
</script>

<style scoped>
.list_table {
  margin-top: 20px;
}
</style>
